<template>
  <div>
    <el-dialog :title="title" :visible.sync="visible" >
  <el-form :model="form" inline :rules='rules' ref='add'>
  <el-form-item label="商品类型名称:" prop='className'>
  <el-input
  type="text"
  placeholder="请输入"
  maxlength="10"
  show-word-limit
  v-model='form.className'
>
</el-input>
  </el-form-item>
  
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click='visible=false'>取 消</el-button>
    <el-button type="primary" @click='submit'>确 认</el-button>
  </div>
</el-dialog>
  </div>
</template>

<script>
import {addtype,edittype} from '@/api/commodity'
export default {
  name: 'add',
  props:{
    row:{
      type:Object,
      default:()=>({})
    }
  },
  data() {
    return {
      form:{},
      visible:false,
      text:'',
      rules:{
        className:[
          {required:true,message:'请输入',trigger:'blur'}
        ]
      }
    };
  },

  mounted() {
    
  },

  methods: {
    // 新增确认
    async submit(){
      await this.$refs.add.validate()
      this.row.classId? await addtype(this.form) : await edittype(this.row.classId)
      // console.log(this.row.classId,'会有结果吗');
      // console.log(res,'新增商品类型');
      this.$message.success(`${this.row.classId?'修改成功':'新增成功'}`)
      this.visible = false
      this.$parent.producttypeList()
    }
  },
  // 监测visible
  watch:{
    visible(val){
      if(!val){
        this.$refs.add.resetFields()
        this.form={}
      }
    }
  },
  computed:{
    title(){
     return this.row.classId?'修改商品类型':'新增商品类型'
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-input{
  width: 500px;
}
</style>